<template>
  <div class="live">
    <h3>商家实景</h3>
    <div class="siper">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(pic, index) in shopLis.pics" :key="index">
          <img :src="pic" alt="" class="pic" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30
      }
    }
  },
  computed: {
    ...mapState(['shopLis'])
  }
}
</script>

<style lang="less" scoped>
.live {
  margin-top: 10px;
  background-color: #fff;
  padding: 13px;
  overflow: hidden;
  h3 {
    font-size: 17px;
    font-weight: 550;
  }
  .siper {
    margin-top: 14px;
    .swiper {
      height: 120px;
      width: 100%;
      .swiper-slide {
        .pic {
          height: 100px;
          width: 120px;
        }
      }
    }
  }
}
</style>
